<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="奖励设置" name="first">
          <el-table :data="reward" style="width: 98%;margin: 10px auto 0" border
              v-loading="loading1"
              element-loading-text="拼命加载中....">

            <el-table-column label="推荐一人奖励金额" align="center" prop="validity_period">
              <template slot-scope="{row}">
                <span>{{row.price}}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="{row}">
                <el-button size="mini" type="primary" @click="handlerewardEdit(row)">编辑</el-button>
                <!-- <edit :row_id="Number(row.id)"></edit> -->
              </template>
            </el-table-column>
            
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="推荐奖励海报" name="second">
          <el-table :data="posterset" style="width: 98%;margin: 10px auto 0" border
              v-loading="loading2"
              element-loading-text="拼命加载中....">

            <el-table-column label="推荐奖励海报" align="center">
                <template slot-scope="{row}">
                  <img :src="row.head_img" width="100px" @click="bigImg(row.id)"/>
                  <transition name="el-zoom-in-top">
                    <div v-show="row.id === listItemId" class="bigImg" @click="bigImg">
                      <img :src="row.head_img">
                    </div>
                  </transition>
                </template>
            </el-table-column>

            <el-table-column label="编辑" align="center">
              <template slot-scope="{row}">
                <el-button size="mini" type="primary" @click="handlePosterset(row)">编辑</el-button>
              </template>
                <!-- <edit :row_id="Number(row.id)"></edit> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <reward ref="showEditRewardDialog"/>
      <posterset ref="reference"/>
  </div>
</template>
<script>
import {getList} from '@/api/thk/cms/member'
import store from '@/store'
import request from '@/utils/request'
import reward from './rewardedit'
import posterset from './posterset'
export default {
  components:{
    reward,
    posterset
  },
  data(){
    return{
      formLabelWidth: '130px',
      activeName:'first',
      loading1:true,
      loading2:true,
      memberintroduce:[{
        head_img:'',
        detail:''
      }
      ],
      reward:[
        {
          price:'',
          type:''
        }
      ],
      posterset:[
        {
          id:null,
          head_img:'',
          type:''
        }
      ],
      listData: {},
      total:undefined,
      listItemId:null
    }
  },
  methods:{
    bigImg(id) {
      console.log(id)
      if (id > 0) {
        this.listItemId = id
      } else {
        this.listItemId = null
      }
    },
    handlerewardEdit(row){
      console.log('handleEdit',row)
      this.$refs.showEditRewardDialog.showEditDialog(row)
    },
    handlePosterset(row){
      this.$refs.reference.showEditDialog(row)
    },
    getrewardList(reward_price){
        this.detail(reward_price).then(res=>{
          this.reward[0].price=res.data.data.content
          this.reward[0].type=res.data.data.type
        })
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.loading2=false
    },
    getposterset(reward_poster){
      this.detail(reward_poster).then(res=>{
        this.posterset[0].head_img=res.data.data.content
        this.posterset[0].type=reward_poster
        this.posterset[0].id=res.data.data.id
        console.log(res.data.data,"777")
      })
    },
    detail(type){
      return request({
        url:'video/Invite_reward/select_recommend_background',
        method: 'post',
        params: {token:store.getters.token,type:type}
      })
    }
  },
  created(){
    this.getrewardList("reward_price")
    this.loading1=false
    this.getposterset("reward_poster")
  },
  updated(){
    
  }
}
</script>
<style>
  .bigImg{
    min-width:100%;
    min-height:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999999;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    /*transition:1s;*/
  }
  .bigImg img{
    max-width: 650px;
    min-width: 235px;
  }
</style>